States Based UI Split

Source Code: https://github.com/dyte-io/react-native-samples/tree/main/samples/create_your_own_ui

Now that the basic states and configs handling is taken care of, we can focus on customisation.

states.meeting represents the meeting state such as setup/ended/waiting/joined that can be utilised to show different screens.

import React from 'react';
import { View } from 'react-native';

function CustomDyteMeetingUI({
  meeting,
  config,
  states,
  setStates,
}: {
  meeting: DyteClient;
  config: UIConfig;
  states: CustomStates;
  setStates: SetStates;
}) {
  if (!meeting) {
    return <View> A loading screen comes here </View>;
  }

  if (states.meeting === 'setup') {
    return <View>Pre-call UI comes here </View>;
  }

  if (states.meeting === 'ended') {
    return <View>Post-call UI comes here </View>;
  }

  if (states.meeting === 'waiting') {
    return <View>Waiting room UI comes here </View>;
  }

  if (states.meeting === 'joined') {
    return <View>In-call UI comes here </View>;
  }
}

Since we have already discussed how you can build a custom pre-call UI from scratch, we will now focus exclusively on the in-meeting UI.

In the next steps, we will learn how we can create custom header, footer and the stage UI using Dyte components.